<!DOCTYPE html>
<html>

<head>
    <title>Image Slideshow</title>
    <link rel="stylesheet" href="script08.css">
    <script src="script08.js"></script>
    <style>
        body {
            background-color: #FFF;
        }
        
        .centered {
            text-align: center;
        }
        
        img#myPicture {
            width: 262px;
            height: 262px;
        }
    </style>
</head>

<body>
    <h3 class="centered">
        <img src="/assert/img/tank.jpg" id="myPicture" alt="Slideshow"><br> Use the right and left arrows on your keyboard to view the slideshow
    </h3>
    <script>
        // document.onkeydown = keyHit;
        // var thisPic = 0;

        // function keyHit(evt) {
        //     var myPix = new Array("/assert/img/tank.jpg", "/assert/img/tank1.jpg");
        //     var imgCt = myPix.length - 1;
        //     var ltArrow = 37;
        //     var rtArrow = 39;

        //     if (evt) {
        //         var thisKey = evt.which;
        //     } else {
        //         var thisKey = window.event.keyCode;
        //     }

        //     if (thisKey == ltArrow) {
        //         chgSlide(-1);
        //     } else if (thisKey == rtArrow) {
        //         chgSlide(1);
        //     }

        //     function chgSlide(direction) {
        //         thisPic = thisPic + direction;
        //         if (thisPic > imgCt) {
        //             thisPic = 0;
        //         }
        //         if (thisPic < 0) {
        //             thisPic = imgCt;
        //         }
        //         document.getElementById("myPicture").src = myPix[thisPic];
        //     }
        // }


        //使用addEvent
    </script>
</body>

</html>